<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello bootstrap</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        p[class^="bg"] {
            padding: 15px;
        }

        .box {
            width: 150px;
            height: 50px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div class="container">

    <p class="text-muted">今天天气不错1</p>
    <p class="text-primary">今天天气不错2</p>
    <p class="text-info">今天天气不错3</p>
    <p class="text-success">今天天气不错4</p>
    <p class="text-danger">今天天气不错5</p>
    <p class="text-warning">今天天气不错6</p>

    <p class="bg-primary">今天天气不错1</p>
    <p class="bg-info">今天天气不错2</p>
    <p class="bg-warning">今天天气不错3</p>
    <p class="bg-danger">今天天气不错4</p>
    <p class="bg-success">今天天气不错5</p>

    <div class="row">
        <div class="col-md-2">
            <button class="close" type="button">&times;</button>
        </div>
        <div class="col-md-4">
            <span class="caret"></span>
            <button class="btn btn-primary">显示
                <span class="caret"></span>
            </button>
            <button class="btn btn-primary dropup">隐藏
                <span class="caret"></span>
            </button>
        </div>
        <div class="col-md-6">
            <div class="box pull-left">hehe</div>
            <div class="box pull-right">hehe</div>
        </div>
    </div>

    <div class="box center-block hidden">让盒子整体局中</div>
</div>

<script type="text/javascript">
    //获取按钮
    let btn = document.querySelector(".btn.btn-primary");
    btn.onclick = function (event) {
        //
        document.querySelector(".box.center-block").className = "box center-block show";
    }
</script>
</body>
</html>